

import React, { useDeferredValue, useState, useMemo } from 'react'
import List from './List'

export default function UseDeferredValueDemo() {
    
  const [inpVal, setInpVal] = useState('')
  
  //useDeferredValue 需要接收一个值, 返回这个值的副本, 副本的更新会在值更新渲染之后进行更新,
  const deferredValue = useDeferredValue(inpVal)
  
  // useMemo：避免函数的无效调用。
  const memoList = useMemo(() => <List count={deferredValue}></List>, [deferredValue])
  
  return (
    <>
      <h1>UseDeferredValue</h1>
      <input type="number" value={inpVal} max={200000} onChange={(e) => setInpVal(e.target.value)}/>
      
      {memoList}
    </>
  )
}